<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
	<title>ajax</title>
	<style type="text/css">
		.profile{
			width: 400px;
			margin: 0 auto;
			min-height: 400px;
			border: 1px solid #ccc;
		}

		/*#sel{
			margin-left: 755px;
			margin-top: -285px;
		}*/
	</style>
</head>
<body>


	<div class="profile">
		<p><span>姓名：</span><span id="sname"></span></p>
		<p><span>年龄：</span><span id="sage"></span></p>
		<p><span>朋友：</span><span id="sfriends"></span></p>
		
	</div>


	<div class="sldiv">
		<select id="province">
			<option>广西</option>		
		</select>省

		<select id="city">
			<option>柳州</option>
		</select>市

		<select id="area">
			<option >城中</option>
		</select>区
	</div>
	





	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		
		$.get('data/student.json',function(res){

			// var student = JSON.parse(res);
			// console.log(student.name);
			//让姓名在html里面显示
			$('#sname').text(res.name);
			$('#sage').text(res.age);

			
		    var fname='';

            for(var i=0;i<res.friends.length;i++){

            	fname += res.friends[i].name+" ";
            }

            $('#sfriends').text(fname);

		});




        /**把省的信息添加到下拉列表**/
		$.get('data/province.json',function(res){
			$('#province').empty();
			for(var i=0;i<res.length;i++){
				var p=res[i];
				var option='<option value="'+p.id+'">'+p.name+'</option>';
				$('#province').append(option);
			}
		})


        /**把城市的信息添加到下拉列表**/
		$.get('data/city.json',function(res){
			$('#city').empty();
			for(var i=0;i<res.length;i++){
				var p=res[i];
				var option='<option value="'+p.id+'">'+p.name+'</option>';
				$('#city').append(option);
			}
		})


        /**把县区的信息添加到下拉列表**/
		$.get('data/area.json',function(res){
			$('#area').empty();
			for(var i=0;i<res.length;i++){
				var p=res[i];
				var option='<option>'+p.name+'</option>';
				$('#area').append(option);
			}
		});


        /****/
		$('#city').change(function(){

			var cid=$(this).val();
			var tmp=[];

			$.get('data/area.json',function(res){
				for(var i=0;i<res.length;i++){
					if(res[i].pid == cid){
						console.log(res[i]);
						tmp.push(res[i]);
					}
				}

				$('#area').empty();
				for(var j=0;j<tmp.length;j++){
					var option='<option>'+tmp[j].name+'</option>';
				    $('#area').append(option);

				}
				console.log('我在处理函数的里面');
			})

			console.log('我在处理函数的外面');
		});







		$('#province').change(function(){
			var pid=$(this).val();
			var tmp =[];
			$.get('data/city.json',function(res){
				for(var i=0;i<res.length;i++){
					if(res[i].pid==pid){
						tmp.push(res[i]);
					}
				}


				$('#city').empty();

				for(var j=0;j<tmp.length;j++){
					var option='<option value="'+tmp[j].id+'">'+tmp[j].name+'</option>';
					$('#city').append(option);

				
				}

                /*过滤县区*/
				$.get('data/area.json',function(res){
					var cid=$('#city').val();


					var tp=[];
					for(var i=0;i<res.length;i++){
						if(res[i].pid==cid){
							tp.push(res[i]);

						}
					}

					$('#area').empty();
					for(var j=0;j<tp.length;j++){
						var option='<option value="'+tp[j].id+'">'+tp[j].name+'</option>';
						$('#area').append(option);
					}
				})



			})
		})


		




	</script>

</body>
</html>